<template>
  <div class="app-container">
    <div id="main"></div>

    <el-date-picker
      ref="picker"
      v-model="pickDataList"
      type="monthrange"
      :picker-options="pickerOptions"
      value-format="yyyy-MM"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
  </div>
</template>


<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      data:[
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ],
      pickDataList: ['2020-1'], //el-date-picker v-model的值
      pickDate: "", // 存放getPickDate获取的数据
      pickerOptions: {
        onPick: this.getPickDate,
        disabledDate: this.disabledDate,
      },
    };
  },
  mounted() {
    this.a()
    var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    right: '20%'
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Evaporation']
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Evaporation',
      position: 'right',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Precipitation',
      position: 'left',
      alignTicks: true,
      // offset: 80,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[1]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    // {
    //   type: 'value',
    //   name: '温度',
    //   position: 'left',
    //   alignTicks: true,
    //   axisLine: {
    //     show: true,
    //     lineStyle: {
    //       color: colors[2]
    //     }
    //   },
    //   axisLabel: {
    //     formatter: '{value} °C'
    //   }
    // }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'line',
      yAxisIndex: 0,
      data: this.data
    },
  
    // {
    //   name: 'Precipitation',
    //   type: 'line',
    //   yAxisIndex: 0,
    //   data: [
    //     2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
    //   ]
    // },
    // {
    //   name: 'Temperature',
    //   type: 'line',
    //   yAxisIndex: 2,
    //   data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    // }
  ]
};

option && myChart.setOption(option);

  },

  methods: {
   async a(){
      this.data=[
        3.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    getPickDate(pick) {
      this.pickDate = pick;
    },
    disabledDate(date) {
      const { minDate, maxDate } = this.pickDate;
      if (minDate && !maxDate) {
        const timeDiff = Math.abs(minDate.valueOf() - date.valueOf());
        if (timeDiff > 1000 * 3600 * 24 * 365 ) {
          return true;
        }
      }
    },

    drawChart(option, a = 0) {
      let data = option.xAxis.data.slice(0, 7);
      let series1 = [];
      for (let i = 0; i < Math.ceil(option.xAxis.data.length / 7); i++) {
        series1.push({
          data: [],
          type: "bar",
          itemStyle: { color: "" },
          barGap: 0,
        });
      }

      for (let i = 0; i < series1.length; i++) {
        series1[i].data = option.series[a].data.slice(7 * i, 7 * (i + 1));
        series1[i].itemStyle.color = option.series[i].itemStyle.color;
        series1[i].name = option.series[a].name;
      }

      let legenLabel = ["成蛹量", "成僵量", "隔离量"];

      let l2 = legenLabel.filter((val) => val != series1[0].name);

      l2.forEach((val) => {
        series1.push({
          name: val,
          data: null,
        });
      });
      // chart.setOption(
      //   {
      //   series:series1,
      //   xAxis:{
      //     data
      //   }
      // }
      // );

      return { series1, data };
    },
  },
};
</script>

<style scoped>
#main {
  width: 100%;
  height: 500px;
}
</style>
